/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import axios from 'axios'
import IceContainer from '@icedesign/container';
import { Table, Input, Grid, Form, Select, Tree, Button, Message, Icon } from '@alifd/next';
import {observer, inject} from 'mobx-react';
import moment from 'moment';
import { ApiOfResourceGet, ApiOfCollectTest,ApiOfControlTest } from '#/utils/coreApiDefine'
import BaseInfo from './components/BaseInfo';
import GatewayInfo from './components/GatewayInfo';
import CollectTest from './components/CollectTest';
import ControlTest from './components/ControlTest';
import Status from './components/Status';

const { Row, Col } = Grid;
const Option = Select.Option;

@inject('dictstore')
@observer
export default class OperationPage extends Component {
  static displayName = 'OperationPage';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      baseInfo: {
        id: '',
        name: '',
        code: '',
        executionCycle: '',
        createTime: '',
        type: '',
        config: '',
        disabled: false,
      },
      gateway: {
        id: '',
        name: '',
        code: '',
        physicalConnType: '',
        config: '',
        createTime: '',
        connectRetry: '',
        connectTimeout: '',
        workMode: '',
        disabled:'',
        batched:'',
      },
      collectGroup: {
        protocol: '',
        // executionCycle: '',
        metrics:[],
      },
      controlGroup: {
        protocol: '',
        metrics:[],
      },
    };
  }

  componentWillMount() {
    ApiOfResourceGet(this.props.match.params.code).then(response => {
      const baseInfo = Object.assign({}, this.state.baseInfo);
      for(let k in baseInfo) {
        baseInfo[k] = response.data[k]
      }
      const gateway = Object.assign({}, this.state.gateway);
      if(response.data.gateway) {
        for(let k in gateway) {
          gateway[k] = response.data.gateway[k]
        }
      }
      const collectGroup = Object.assign({}, this.state.collectGroup);
      const controlGroup = Object.assign({}, this.state.controlGroup);

      if(response.data.metricGroupSize > 0) {
        let group = response.data.metricGroups.find(it=>it.usageType == 'COLLECT');
        if(group && group.metricSize > 0) {
          collectGroup.code = group.code;
          collectGroup.name = group.name;
          collectGroup.protocol = group.protocol;
          // collectGroup.executionCycle = group.executionCycle;
          collectGroup.metrics = group.metrics;
        }
        group = response.data.metricGroups.find(it=>it.usageType == 'CONTROL');
        if(group && group.metricSize > 0) {
          controlGroup.code = group.code;
          controlGroup.name = group.name;
          controlGroup.protocol = group.protocol;
          controlGroup.metrics = group.metrics
        }
      }
      this.setState({
        baseInfo,
        gateway,
        collectGroup,
        controlGroup,
      })
    })
  }

  render() {
    return (
      <div>
        <IceContainer>
          <Row gutter="20">
            <Col l="8">
              <BaseInfo info={ this.state.baseInfo } />
              <GatewayInfo info={ this.state.gateway } />
            </Col>
            <Col l="16">
              <Status deviceCode={this.props.match.params.code} baseInfo={this.state.baseInfo} gateway={this.state.gateway} collectGroup={this.state.collectGroup} />
              <CollectTest deviceCode={this.props.match.params.code} group={this.state.collectGroup} />
              <ControlTest deviceCode={this.props.match.params.code} group={this.state.controlGroup} />
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}
